import { createApp } from 'vue'
import App from './App.vue'

import hl from 'highlight.js' // 导入代码高亮文件
import 'highlight.js/styles/default.min.css'  //导入代码高亮样式

import router from "./router"

const app = createApp(App)
// 通过调用 app.use (router) ，我们会触发第一次导航且可以在任意组件中以 this.$router 的形式访问它，并且以 this.$route 的形式访问当前路由
app.use(router)

// 自定义一个代码高亮指令
app.directive('highlight', function (el) {
  const blocks = el.querySelectorAll('pre code')
  blocks.forEach((block) => {
    hl.highlightBlock(block)
  })
})

app.mount('#app')
